import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

// 群聊头像组件
const GroupAvatar = ({ centerAvatar, avatars }) => {
    return (
        <View style={styles.container}>
            {/* 中央头像 */}
            <Image
                source={{ uri: centerAvatar }}
                style={styles.avatarCenter}
            />

            {/* 顶部头像 */}
            {avatars[0] && (
                <View style={styles.avatarTop}>
                    <Image
                        source={{ uri: avatars[0] }}
                        style={styles.avatar}
                    />
                </View>
            )}

            {/* 左侧头像 */}
            {avatars[1] && (
                <View style={styles.avatarLeft}>
                    <Image
                        source={{ uri: avatars[1] }}
                        style={styles.avatar}
                    />
                </View>
            )}

            {/* 右侧头像 */}
            {avatars[2] && (
                <View style={styles.avatarRight}>
                    <Image
                        source={{ uri: avatars[2] }}
                        style={styles.avatar}
                    />
                </View>
            )}

            {/* 底部头像 */}
            {avatars[3] && (
                <View style={styles.avatarBottom}>
                    <Image
                        source={{ uri: avatars[3] }}
                        style={styles.avatar}
                    />
                </View>
            )}
        </View>
    );
};

// 样式
const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
        width: 42, // 设置容器宽度
        height: 42, // 设置容器高度
    },
    avatarCenter: {
        width: 20,  // 中心头像大小
        height: 20,
        borderRadius: 10, // 圆形头像
        borderWidth: 2,
        borderColor: '#fff', // 边框颜色
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: [{ translateX: -10 }, { translateY: -10 }], // 居中
    },
    avatar: {
        width: 14, // 头像宽度
        height: 14, // 头像高度
        borderRadius: 7, // 圆形头像
        borderWidth: 2,
        borderColor: '#fff', // 边框颜色
    },
    avatarTop: {
        position: 'absolute',
        top: -10, // 顶部头像位置
        left: '50%',
        transform: [{ translateX: -7 }], // 水平居中
    },
    avatarLeft: {
        position: 'absolute',
        left: -10, // 左侧头像位置
        top: '50%',
        transform: [{ translateY: -7 }], // 垂直居中
    },
    avatarRight: {
        position: 'absolute',
        right: -10, // 右侧头像位置
        top: '50%',
        transform: [{ translateY: -7 }],
    },
    avatarBottom: {
        position: 'absolute',
        bottom: -10, // 底部头像位置
        left: '50%',
        transform: [{ translateX: -7 }], // 水平居中
    },
});

export default GroupAvatar;
